<template>
  <div class="class_box">
    <van-nav-bar @click-left="onClickLeft" title="一对一辅导" left-arrow>
      <template #right>
        <van-icon name="search" size="18" />
      </template>
    </van-nav-bar>
    <van-dropdown-menu>
      <van-dropdown-item title="选择上课时间">
        <div class="class_date">
          <div>
            <div class="class_cell">
              <van-calendar
                v-model="show"
                :min-date="minDate"
                :max-date="maxDate"
                :value="date"
                @confirm="onConfirm"
                :poppable="false"
                @click="show = true"
              />
            </div>
          </div>
        </div>
        <div class="class_time">
          <div>
            <p>时段</p>
            <ul>
              <li>
                <span>开始时间</span>
                <van-icon name="clock-o" />
              </li>
              <p style="color:#f0f0f0;">-</p>
              <li>
                <span>结束时间</span>
                <van-icon name="clock-o" />
              </li>
            </ul>
          </div>
        </div>
        <div class="class_con"></div>
        <div class="class_btn">
          <button style="color:orange;background:#fff;">重置</button>
          <button style="color:#fff;background:#f00;">确定</button>
        </div>
      </van-dropdown-item>
      <van-dropdown-item title="选择老师条件">
        <div class="class_type">
          <p>老师类型</p>
          <ul class="class_type_con">
            <li v-for="(item,index) in teacherList.otoTeacherLevel" :key="index">{{item.level_name}}</li>
          </ul>
          <ul class="class_nianji" v-for="(item,index) in teacherList.attrList" :key="index">
            <p>{{item.attr_name}}</p>
          <li v-for="(t, i) in item.child" :key="i">{{ t.attr_val_name }}</li>
          </ul>
        </div>
      </van-dropdown-item>
    </van-dropdown-menu>
    <div class="class_teacher">
      <div class="class_tea" v-for="(item,index) in list" :key="index">
        <img :src="item.avatar" alt />
        <div class="class_name">
          <p class="class_user">
            <span>{{item.real_name}}</span>
          </p>
          <p class="class_age">{{ item.sex == 0 ? "男" : "女" }},{{item.teach_age}}年教龄</p>
        </div>
        <div class="class_order">预约</div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  NavBar,
  Icon,
  Tabs,
  Tab,
  Cell,
  Calendar,
  DropdownItem,
  DropdownMenu
} from "vant";
import { otoCourses,otoCourseOptions1 } from "../../request/http";
// import {otoCourses} from '@/request/http'
export default {
  components: {
    [NavBar.name]: NavBar,
    [Icon.name]: Icon,
    [Tabs.name]: Tabs,
    [Tab.name]: Tab,
    [Cell.name]: Cell,
    [Calendar.name]: Calendar,
    [DropdownItem.name]: DropdownItem,
    [DropdownMenu.name]: DropdownMenu
  },
  data() {
    return {
      date: "",
      show: false,
      minDate: new Date(2020, 12, 16),
      maxDate: new Date(2020, 12, 31),
      list: [],
      teacherList:[]
    };
  },
  created() {},
  mounted() {
    this.getotoCourse();
    this.getotoCourseOptions()
  },
  computed: {},
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    formatDate(date) {
      return `${date.getMonth() + 1}/${date.getDate()}`;
    },
    onConfirm(date) {
      this.show = false;
      this.date = this.formatDate(date);
    },
    // 获取数据
    getotoCourse() {
      otoCourses({
        page: 1,
        limit: 10,
        attr_val_id: 1
      }).then(res => {
        console.log(res);
        this.list = res;
      });
    },
    getotoCourseOptions() {
      otoCourseOptions1().then((res)=>{
        console.log(res)
      this.teacherList = res
      }) 
    }
    // async getotoCourse() {
    //   const {res} = await otoCourses()
    //   console.log(res)
    // }
  }
};
</script>
<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
.class_date {
  width: 100%;
  padding: 1%;
  box-sizing: border-box;
  div {
    width: 99%;
    background-color: #fff;
    p {
      font-size: 14px;
      margin-left: 15px;
      margin-top: 5px;
      height: 30px;
      line-height: 30px;
    }
    ul {
      font-size: 12px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 30px;
      li {
        line-height: 20px;
      }
    }
  }
}
.class_time {
  width: 100%;
  padding: 1%;
  box-sizing: border-box;
  div {
    width: 99%;
    background-color: #fff;
    p {
      font-size: 14px;
      margin-left: 15px;
      margin-top: 5px;
      height: 30px;
      line-height: 30px;
    }
    ul {
      font-size: 12px;
      display: flex;
      justify-content: space-around;
      li {
        width: 150px;
        height: 30px;
        line-height: 30px;
        border: 1px solid #f0f0f0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
        padding-right: 10px;
        span {
          display: inline-block;
          background-color: #f0f0f0;
          width: 100px;
          line-height: 25px;
          padding-left: 10px;
        }
      }
    }
  }
}
.class_con {
  width: 100%;
  height: 300px;
  background-color: #f0f0f0;
}
.class_btn {
  width: 100%;
  display: flex;
  justify-content: space-between;
  button {
    width: 50%;
    height: 40px;
    font-size: 14px;
    border: none;
  }
}
.class_teacher {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
  .class_tea {
    width: 100%;
    height: 100px;
    background-color: #fff;
    display: flex;
    // justify-content: space-between;
    align-items: center;
    margin: 8px 0;
    img {
      width: 60px;
      height: 60px;
      border: 1px solid #ccc;
      border-radius: 50%;
    }
    .class_name {
      width: 200px;
      margin-left: 25px;
      .class_user {
        span {
          font-size: 16px;
          color: #333;
        }
      }
      .class_age {
        font-size: 12px;
        color: #ccc;
      }
    }
    // 预约
    .class_order {
      width: 70px;
      height: 30px;
      line-height: 30px;
      background-color: #ebeefe;
      font-size: 16px;
      color: #f00;
      text-align: center;
      border-radius: 20px;
    }
  }
}
// 老师条件
.class_type {
  width: 100%;
  padding: 5px;
  box-sizing: border-box;
  p {
    font-size: 16px;
    color: #333;
    margin: 10px 0;
  }
  .class_type_con {
    width: 100%;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    li {
      width: 22%;
      height: 30px;
      line-height: 30px;
      font-size: 14px;
      border: 1px solid #ccc;
      text-align: center;
      background-color: #f5f5f5;
      color:#646464;
    }
  }
}
.class_nianji {
  width: 100%;

}
</style>


